<template>
  <v-container>
    <v-row align="center">
      <v-col v-for="(card, index) in cards.slice( firstCard, lastCard )" v-bind:key="index" lg="3">
        <HomeSingleCard :image="card.image"
                        :position="index"
                        :text="card.text"
                        :text_dialog="card.text_dialog"
                        :title="card.title"
                        class="HomeSingleCard"
        />
      </v-col>
    </v-row>
    <!--<!- 实现分页&ndash;&gt;-->
    <v-pagination v-model="pageIndex" :length="cards.length / 4 + 1"

    ></v-pagination>
  </v-container>

</template>

<script lang="ts">
import HomeSingleCard from "@/components/Home/HomeSingleCard.vue";

export default {
  components: {
    HomeSingleCard,
  },
  data() {
    return {
      cards: [
        {
          title: '天气降温，关注流浪猫近况',
          text: '近日，随着天气逐渐降温，关注河南大学校园内流浪猫们的生存状况成为了人们关注的焦点。流浪猫作为校园内的一部分，面临着寻找庇护所...',
          image: "https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/homepage/blackwhite.png",
          text_dialog: "日期：2023年12月16日  近日，随着天气逐渐降温，关注河南大学校园内流浪猫们的生存状况成为了人们关注的焦点。流浪猫作为校园内的\n" +
            "\n" +
            "一部分，面临着寻找庇护所、食物和水的挑战。天气寒冷，对它们的生存带来了更多的困难和风险。为了帮助流浪猫渡过寒冷的冬天，河南大学的学生们纷纷\n" +
            "\n" +
            "行动起来。志愿者们积极参与到流浪猫救助计划中，设立临时喂养站和救助站，为流浪猫提供食物、水和暖和的避寒场所。此外，他们还开展了针对流浪猫的\n" +
            "\n" +
            "救助行动，对生病或受伤的流浪猫进行治疗和护理。除了学生们的努力，当地的动物保护组织也发挥着重要的作用。他们提供资金和人力资源支持，组织流浪\n" +
            "\n" +
            "猫的救助活动，并推动相关政策的实施，为流浪猫提供更好的保护和关怀。对于大家来说，与流浪猫的互动也是需要慎重对待的。在喂食或互动过程中，请保\n" +
            "\n" +
            "持安全和尊重，不要过分靠近或伤害它们。如果发现有需要帮助的流浪猫，可以及时与相关组织联系，共同为它们提供帮助和救助。\n" +
            "\n" +
            "随着天气继续降温，我们呼吁更多的人们参与到关爱流浪猫的行动中。每个人的力量都可以为这些无辜的小生命带来一丝温暖和希望。\n" +
            "\n" +
            "记者：XXX"
        },
        {
          title: '找路人“讹人”要粮',
          text: '近期，河南大学校园内的流浪猫们惊喜地展示出了他们与人类互动的智慧一面。有眼尖的学生们发现，一些猫咪在饥饿时会主动靠近过路人，寻...',
          image: "https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/homepage/whitecat.png",
          text_dialog: "日期：2023年12月16日   近期，河南大学校园内的流浪猫们惊喜地展示出了他们与人类互动的智慧一面。有眼尖的学生们发现，一些猫咪在饥饿时会主动靠近过路人，寻找食物帮助，可以说是用非常巧妙的方式“讹人”要粮。\n\n这一现象引起了校园内外的广泛关注与讨论。据了解，一些猫咪已经学会了寻找特定的目标，比如一些常常会提供食物的学生或教职员工。它们会巧妙地走近目标，并用温柔可爱的姿态引起对方的注意。一旦被注意到，它们会用撒娇的眼神和动作引发对方的同情心，期待能够换取一些食物。\n\n校园内的学生们纷纷对这些聪明可爱的猫咪表示赞赏，并积极响应它们的需求。许多人主动准备了猫粮、猫零食等食物，帮助这些流浪猫度过饥饿的时刻。一些学生还积极寻找流浪猫救助组织或志愿者团队，为这些可爱的小生命提供更多的关怀和帮助。\n\n对于学生和校园管理部门来说，这一现象点亮了对流浪猫问题的关注和改善的意识。一方面，学生们的行动展示了对动物福利的重视，希望改善流浪猫的生存状况；另一方面，校园管理部门也开始思考如何更好地管理流浪猫群体，以确保它们的健康和公共安全。\n\n然而，我们也需要注意，虽然这些流浪猫显得温顺可爱，但它们仍然是野生动物，需要适度的距离与互动。在与它们接触时，请保持警惕和安全意识，避免过度依赖人类的食物。同时，我们也呼吁校园内的相关部门和志愿者团队加强管理和救助工作，为这些流浪猫提供更好的安全和关怀。\n\n河南大学校园内流浪猫们的智慧和互动方式引起了大家的关注，同时也提醒我们，与这些可爱的小生命共建和谐共处的理念依然需要继续倡导和践行。\n" +
            "\n" +
            "记者：XXX"
        },
        {
          title: '猫猫巡视',
          text: '河南大学校园内的流浪猫问题一直是大家关注的热点话题之一，而如何更好地管理这些流浪猫们的生存问题也日益成为了大家必须面对和解决的...',
          image: "https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/homepage/dae.png",
          text_dialog: "日期：2023年12月16日 河南大学校园内的流浪猫问题一直是大家关注的热点话题之一，而如何更好地管理这些流浪猫们的生存问题也日益成为了大家必须面对和解决的问题。近日，学校内一只名叫“三花学姐”的流浪猫以她独特的方式为学生们提供了更好的流浪猫管理方式，成为了校园内备受关注的小袋鼠。\n" +
            "\n" +
            "河南大学的猫猫们非常幸运能有三花学姐这样的“大姐”为它们提供帮助。在学校内更好地实现流浪猫管理，维护动物生存与人类和谐性休战的大背景下，三花学姐的存在掷地有声，也为学生们为这个问题所做的努力提供了模仿性的示范。\n" +
            "\n" +
            "记者：XXX"
        },
        {
          title: '河大的猫猫们',
          text: '河南大学校园内的猫猫们，成为了学生们日常生活中不可或缺的一部分。这些活泼可爱的小动物，已经成为了校园内的一道独特风景线。在校园...',
          image: "https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/homepage/blackwhite.png",
          text_dialog: "日期：2023年12月16日 河南大学校园内的猫猫们，成为了学生们日常生活中不可或缺的一部分。这些活泼可爱的小动物，已经成为了校园内的一道独特风景线。在校园的角落里，你很有可能会遇到它们，它们或蜷缩在树荫下打盹，或追逐玩耍，它们的身影无处不在，给校园注入了一份活力与温暖。不仅如此，学校内的猫猫们也是学生们心灵的慰藉。在繁重的学业与工作压力下，与猫猫相处成为了不少学生减压的方式。近年来，学校也推出了相关政策，加强对猫猫们的关爱与管理，让它们在校园内健康快乐地生活。希望未来，我们能够共同努力，让这些可爱的猫猫们成为我们校园更美好的一部分。\n" +
            "\n" +
            "记者：XXX"
        },
        {
          title: '善解人意的小猫',
          text: '这只小猫善解人意，猫猫似乎能够读懂人类的情感，当主人情绪低落时，它们会悄悄走到主人身边，用柔软的身体温暖人心，似乎在默默地安慰...',
          image: "https://sakura-cjq.oss-rg-china-mainland.aliyuncs.com/homepage/blackwhite.png",
          text_dialog: "这只小猫善解人意，猫猫似乎能够读懂人类的情感，当主人情绪低落时，它们会悄悄走到主人身边，用柔软的身体温暖人心，似乎在默默地安慰和陪伴。这种体贴的举动让猫猫成为人类的知心伙伴。\n"
        },

        // Add more cards as needed

      ],
      pageIndex: 1,
    };
  },
  computed: {
    firstCard() {
      return (this.pageIndex - 1) * 4
    },
    lastCard() {
      return this.firstCard + 4
    }
  },
  methods: {},
};

</script>

<style scoped>

.HomeSingleCard {
  /* 可以添加一些其他的样式，如边距和宽度等 */
  display: inline-block;
  margin: 10px;
  max-width: 315px;
}


</style>
